<template>
  <div class="special-wrap">
    <div class="search-header">
      <div class="search-box">
        <el-input v-model="specialName" placeholder="输入专业名称" class="handle-input mr10"
          @keyup.enter="handleSearch"></el-input>
        <el-button type="primary" class="search-button" id="search-button" @click="handleSearch">
          <el-icon>
            <Search />
          </el-icon>搜索
        </el-button>

      </div>
      <el-radio-group fill="#548757" v-model="specialLevel" size="large" @change="handleSearch">
        <el-radio-button label="本科" />
        <el-radio-button label="专科" />
      </el-radio-group>
    </div>

    <el-radio-group v-model="specialClass" size="large" @change="handleSearch">
      <el-radio label="全部" />
      <el-radio v-for="clas in classList" :key="clas.id" :label="clas.name" />
    </el-radio-group>
    <div class="special-list-wrap">
      <ul>
        <li v-for="special in pageSpecialList" :key="special.id" >
          <el-card shadow="hover" style="height: 140px;">
            <div class="special-detail">
              <router-link :to="{ path: '/specialdetail', query: { id: special.id } }" target="_blank">
                <p>{{ special.name }}</p>
              </router-link>
              <span>&nbsp;&nbsp;&#128293;{{ special.hot }}</span>
              <span>&nbsp;&nbsp;{{ special.code }}&nbsp;&nbsp;</span>
              <span>&nbsp;&nbsp;{{ special.year }}年制&nbsp;&nbsp;</span>
              <span>&nbsp;&nbsp;{{ special.degree }}&nbsp;&nbsp;</span>

            </div>
          </el-card>
        </li>
      </ul>
      <el-pagination layout="prev, pager, next, jumper" @current-change="currentChange" :current-page="pageNum"
        :page-size="pageSize" :total="total" />
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import request from "../utils/request.js";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const specialName = ref("");
    const specialLevel = ref("本科");
    const specialClass = ref("全部")
    const classList = computed(() => {
      const benList = [
        {
          id: 3,
          name: '哲学',
        },
        {
          id: 4,
          name: '经济学',
        },
        {
          id: 5,
          name: '法学',
        },
        {
          id: 6,
          name: '教育学',
        },
        {
          id: 7,
          name: '文学',
        },
        {
          id: 8,
          name: '历史学',
        },
        {
          id: 9,
          name: '理学',
        },
        {
          id: 10,
          name: '工学',
        },
        {
          id: 11,
          name: '农学',
        },
        {
          id: 12,
          name: '医学',
        },
        {
          id: 13,
          name: '管理学',
        },
        {
          id: 14,
          name: '艺术学',
        },
      ];
      const zhuanList = [
        {
          id: 15,
          name: '农林牧渔',
        },
        {
          id: 16,
          name: '资源环境与安全',
        },
        {
          id: 17,
          name: '能源动力与材料',
        },
        {
          id: 18,
          name: '土木建筑',
        },
        {
          id: 19,
          name: '水利',
        },
        {
          id: 20,
          name: '装备制造',
        },
        {
          id: 21,
          name: '生物与化工',
        },
        {
          id: 22,
          name: '轻工纺织',
        },
        {
          id: 23,
          name: '食品药品与粮食',
        },
        {
          id: 24,
          name: '交通运输',
        },
        {
          id: 25,
          name: '电子与信息',
        },
        {
          id: 26,
          name: '医药卫生',
        },
        {
          id: 27,
          name: '财经商贸',
        },
        {
          id: 28,
          name: '旅游',
        },
        {
          id: 29,
          name: '文化艺术',
        },
        {
          id: 30,
          name: '新闻传播',
        },
        {
          id: 31,
          name: '教育与体育',
        },
        {
          id: 32,
          name: '公安与司法',
        },
        {
          id: 33,
          name: '公共管理与服务',
        },
      ];
      if (specialLevel.value == "专科") {
        return zhuanList;
      } else {
        return benList;
      }
    });

    //构造post请求Body
    const form = computed(() => {
      return {
        name: specialName.value,
        level: specialLevel.value,
        class_: specialClass.value,
        page_size: pageSize,
        page_index: pageNum.value - 1,
      };
    });

    //前端完成分页
    // const pageNum = ref(1);
    // const pageSize = ref(10);
    // const total = computed(() => {
    //   return specialList.value.length;
    // });
    // const pageSpecialList = computed(() => {
    //   return specialList.value.slice(
    //     (pageNum.value - 1) * pageSize.value,
    //     pageNum.value * pageSize.value
    //   );
    // });
    // const currentChange = (val) => {
    //   pageNum.value = val;
    // };

    //配合后端进行分页
    const pageNum = ref(1);
    const pageSize = 10;
    const total = ref(0);
    const currentChange = (val) => {
      pageNum.value = val;
      getSpecialList();
    };
    const pageSpecialList = ref([]);

    //学校列表
    // const specialList = ref([]);
    const getSpecialList = () => {

      request
        .post("http://192.168.80.190:8000/getSpecialList", form.value)
        .then((res) => {
          if (res.code == 200) {
            pageSpecialList.value = res.data;
            total.value = res.page_total;
            //ElMessage.success("获取学校列表成功");
          } else {
            ElMessage.error({
              message: "获取失败:" + res.message,
            });
          }
        })
        .catch((err) => {
          ElMessage.error({
            message: "服务器错误：" + err,
          });
        });

    };
    getSpecialList();

    const handleSearch = () => getSpecialList();

    return {
      specialName,
      specialLevel,
      specialClass,
      classList,
      form,
      // specialList,
      getSpecialList,
      pageNum,
      pageSize,
      total,
      pageSpecialList,
      currentChange,
      handleSearch,
    };
  },
};
</script>

<style>
.special-wrap {
  /* display: flex;
  flex-direction: column; */
  margin: auto;
  text-align: center;
  height: 100%;
}

.search-header {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  margin: 40px auto;
  height: 40px;
}

.search-box {
  display: flex;
  justify-content: start;
  width: 50%;
}

.el-input {
  width: auto;
}

.search-button {
    margin: 0;
    height: 40px;
}
.search-box>.el-radio-group {
  margin: 0 40px;
}

.special-list-wrap {
  height: 100%;
}

ul {
  justify-content: center;
  padding-inline-start: 0;
}

li {
  list-style-type: none;
}

.el-card {
  margin: 20px auto;
  height: 100px;
  border-radius: 30px;
  background-color: #7fa8820c;
}

/* .el-card__body {
  margin: 40px auto;
} */
.special-detial {
  float: left;
}

p {
  font-size: large;
}

.el-pagination {
  justify-content: center;
}

.search-button {
  margin: 0;
  height: 40px;
  background-color: #548757;
  /* 设置按钮的背景色 */
  border: #548757;
  border-radius: 5px;
  /* 设置按钮的圆角 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /* 设置按钮的阴影效果 */
}

.search-button:hover {
  background-color: #77a97b;
  /* 设置鼠标悬停时的背景颜色 */
  color: #ffffff;
  /* 设置鼠标悬停时的文本颜色 */
}

.el-button--primary {
  --el-button-hover-bg-color: #548757;
}

/* 跳转样式 */
a {
    text-decoration: none;
}
a:link {
    /*默认状态*/
    color: black;
}

a:visited {
    /*浏览过的*/
    color: black;
}

a:hover {
    /*悬浮状态*/
    color: #548757;
}

</style>

<style>
.el-radio__input.is-checked+.el-radio__label {
  color: #548757 !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background: #548757 !important;
  border-color: #548757 !important;
}

.special-detail{
  /* height: 200px; */
}
</style>